<!DOCTYPE  html>

<head>
<title>Ingreso</title>
<link rel="stylesheet" href="noti/messi.min.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" />
<style>
input[type="number"] { height:30px;}

#total_registros, #buscar { height:20px; 
-webkit-border-radius: 8px;
-webkit-border-top-left-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius: 8px;
-moz-border-radius-topleft: 1px;
-moz-border-radius-bottomleft: 1px;
border-radius: 8px;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
color:#900;}

.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
  background-color: #999;
}

.table {
  width: 90%;
  margin-bottom: 20px;
  font-size:12px;
} 

.table td {
  padding: 0px;
  line-height: 20px;
  text-align: center;
  vertical-align: top;
  border-top: 1px solid #dddddd;
}

.table th {  text-align: center; width:300px;}

thead{  color:#666; font-size:14px;}

#contenedor{ width:90%; margin:0 auto 0 auto;}

table{ width:90%;}

a.effect { width: 142px; height: 20px; background-repeat: no-repeat; background-image: url("button_out.gif"); display: block; }
a.effect:hover {
width: 142px;
height: 20px;
background-repeat: no-repeat;
background-image: url("button_over.gif");
display: block;
}


</style>
<style media="print">
#formulario_busqueda { display:none;}
#ordenar_limites{ display:none;}
#contenedor{ width:100%;}
.table{width:100%;}

</style>
</head>

<body>
<div id="ocultar" class="modal hide fade"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Formulario</h3>
  </div>
  <div class="modal-body">
    <form  id="formulario" action="libreria_php/crud.php"   method="post" >
      <table>
        <tr>
          <td><input  type="hidden" name="ejecuta" id="ejecuta" readonly></td>
        </tr>
        <tr>
          <td><input  type="hidden" name="id" id="id" readonly   ></td>
        </tr>
        <tr>
          <td><input  type="hidden" name="tabla" id="tabla"  readonly   ></td>
        </tr>
        <tr>
          <td><input  type="hidden" name="campos" id="campos"  value="id, nombre_producto, precio_venta, precio_costo, embalaje, descripcion, id_familia" readonly   ></td>
        </tr>
      </table>
      <table  id="cargar_formulario">
        <!--- carga los resultados de la funcion traer formulario ---->
      </table>
      <table   align="center">
        <tr>
          <th width="35%">Productos</th>
          <td><select id="id_familia" name="id_familia" class="input-medium">
            </select></td>
        </tr>
        <tr>
          <td colspan="2" ><button type="submit" class="btn-success" name="Enviar" value="Enviar" style="width:30%;" >Enviar</button>
            <button type="reset" class="btn-info" name="Limpiar" value="Enviar" style="width:30%;"  >Limpiar</button>
            <button type="button" class="btn-danger" name="Cancelar" value="Enviar" onClick="ocultar_form()" style="width:30%;"  >Cancelar</button></td>
        </tr>
      </table>
    </form>
  </div>
</div>
<div id="contenedor" >
  <div id="formulario_busqueda">
    <form name="form_busca" id="form_busca" action="#" method="post">
      <fieldset>
        <legend id="legen" align="center"> Formulario Buscar </legend>
        <div class="input-prepend input-append"> <span class="add-on">Total de registros</span>
          <input type="text"  name="total_registros" class="input-mini" id="total_registros" readonly>
        </div>
        <div class="input-prepend input-append" id="ordenar_campos_lista"> <span class="add-on">Ordenar</span>
          <select id="lista_campos" class="input-medium"  >
            <option value="vacio">[ lista de campos ]</option>
          </select>
          <select id="operador_consulta"   >
            <option value="vacio">[ operador ]</option>
            <option value=">">mayor</option>
            <option value="<">menor</option>
            <option value="like">contenga</option>
            <option value="=">igual</option>
          </select>
        </div>
        
       
        <div class="input-prepend input-append"> <span class="add-on">Buscar</span> <span class="add-on"><i class="icon-search"></i></span>
          <input class="span2" name="buscar_registro" id="buscar_registro" placeholder="valor a buscar"  type="text">
          <select id="ordenar"    >
            <option value="vacio">[ ordenar ]</option>
            <option value="ASC" >Ascendente</option>
            <option value="DESC">Desendente</option>
          </select>
          <input type="button" class="btn btn-success" value="enviar" name="enviar" onClick="buscar_y_cargar_tabla()">
        </div>
      </fieldset>
    </form>
  </div>
  <table  class="table table-hover" id="myTable" >
  </table>
  <p>&nbsp;</p>
</div>
<div id="ordenar_limites">
  <div id="paginacion" align="center"></div>
</div>
</div>
<script src="js/jquery10.2.js" ></script> 
<script src="noti/messi.js"></script> 
<script src="bootstrap/js/bootstrap.js"></script> 
<script>

var tabla_usuario = 'producto';

/* campos que va a  mostrar la tabla */ 
var campo = 'id,  nombre_producto, precio_venta,  precio_costo, stock';

/* campos que va a  mostrar el formulario */ 
var campos_formulario = 'id,  nombre_producto, precio_venta, precio_costo,  embalaje, descripcion';

/*  odernar campo */
var ordenar_campo = '';

/* limites de consultas*/
var limitante = '0, 2';
var intervalo_limite = 2;

/* campos que va a cambiar de nombre en el formulario  */ 
//var campos_reemplazar = new Array();
var campos_reemplazar = ['id', 'nombre_producto','precio_venta','precio_costo'];

/* campos que va a reemplazar de nombre en el formulario  */ 
//var campos_reemplazado = new Array();
var campos_reemplazado = ['id', 'nombre producto','precio venta','precio costo'];


</script> 
<script  src="libreria_javascript/cargar_tabla.js"></script> 
<script  src="libreria_javascript/crud.js"></script> 
<script  src="libreria_javascript/cargar_combo.js" ></script> 
<script  src="libreria_javascript/cargar_options_campos.js" ></script> 
<script>
/* cargar option*/
mostrar_combo('grupo_productos', ' id, nombre_grupo ', 'nombre_grupo', 'id_familia')
mostrar_combo_campo(tabla_usuario, campo, campos_reemplazado, 'lista_campos');
</script>
<div id="resultado"></div>
</body>
</html>